<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>基础：5、Class与Style绑定 数组语法</title>
	<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
	<style type="text/css">
	.active { font-weight: 800; }
	.text-danger { color: red; }
	</style>	
</head>
<body>
	<div id="app">
		<p :class="[activeClass, errorClass]">test1</p>
		<p :class="[isActive ? activeClass : '', errorClass]">test2</p>
		<button @click="slim">变细</button>
		<p :class="classObject">test3</p>		
	</div>

	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				activeClass: 'active',
				errorClass: 'text-danger',
				isActive: true,
				isError: true
			},
			methods: {
				slim: function(){
					this.isActive = false
				}
			},
			computed: {
				classObject: function(){
					var obj = this
					return [this.isActive ? this.activeClass : '', this.isError ? this.errorClass : '']
					// return [{ 'active' : obj.isActive }, { 'text-danger' : obj.isError }]		
					// 效果等同于上面一行，但类不能用obj.activeClass，必须是类名字符串
				}
			}
		})
	</script>
</body>
</html>
<!-- 代码均通过测试，有什么纰漏欢迎联系 QQ:1123176978  Wechat:hyhlovehuanong -->